<template>
  <div id="knowledgePoints">
  </div>
</template>

<script>
import echarts from 'echarts'
import waldenProject from './walden.project'

// echarts.registerTheme('walden', waldenProject)

export default {
  props: {
    dataList: {
      type: Object,
      default() {
        return {}
      }
    }
  },
  data() {
    return {
      questionList: [],
      legend: []
    }
  },
  name: 'KnowledgePoints',
  watch: {
    dataList(val) {
      // this.renderData(val)
    }
  },
  mounted() {
    this.init(this.dataList, this.legend)
  },
  created () {
    this.legend = []
    if (this.dataList.pointName && this.dataList.pointName.length > 0) {
      this.dataList.pointName.forEach(item => {
        this.legend.push(item.name)
      })
    }
  },
  beforeDestroy() {
    window.removeEventListener('resize', this.resize.bind(this))
  },
  methods: {
    renderData(val) {
    },
    init(dataList, legend) {
      this.myChart = echarts.init(document.getElementById('knowledgePoints'), waldenProject.theme)

      const option = {
        title: {
          text: '易错知识点统计'
        },
        tooltip: {
          trigger: 'item',
          formatter: '{a} <br/>{b}: {c} ({d}%)'
        },
        legend: {
          // orient: 'vertical',
          left: 'center',
          top: 'bottom',
          data: legend
        },
        series: [
          {
            name: '一级知识点',
            type: 'pie',
            selectedMode: 'single',
            radius: [0, '30%'],

            label: {
              show: false,
              position: 'inner'
            },
            labelLine: {
              show: false
            },
            data: dataList.fatherName
          },
          {
            name: '二级知识点',
            type: 'pie',
            radius: ['40%', '55%'],
            data: dataList.pointName
          }
        ]
      }

      // 使用刚指定的配置项和数据显示图表。
      this.myChart.setOption(option)

      window.addEventListener('resize', this.resize.bind(this))
    },
    resize() {
      this.myChart.resize()
    }
  }
}
</script>

<style  scoped>
#knowledgePoints {
  width: 100%;
  min-height: 400px;
}
</style>
